let index = getQueryString('topicIndex')
if(index){
    echo()
}
//需要删除的项目
var delDom = ''
// 题目id
var topicID = index?index:0

// 必填开关标识
var onoff = 2;   //2就是开启  1就是关闭

// 左边导航点击事件
{/* <div class="text-len" style="display: none;"><span class="font-num">ee</span>/50</div> */ }
$('.left-item').click(function () {
    topicID++
    console.log('index',topicID)
    $('h1').hide()
    $('.main').show()
    let dataName = $(this).attr('data-name')
    if (dataName == 'radio') {
        let radio = `<div class="main-box" id="topicID${topicID}">
                        <div class="main-box-title">
                            <li class="index-num"></li>
                            <div class="type">单选题</div>
                            <div class="must" data-id="1" style="display: none;">*</div>
                            <div class="title">
                                <div class="title-text wrap" id="topicNum${topicID}" data-type="1">题目（点击编辑题目）</div>
                                <div class="title-input" style="display: none;">
                                    <input type="text">
                                </div>
                            </div>
                            <!-- 删除 -->
                            <div class="del" style="display: none;">
                                <img src="./img/shanchu.png" alt="">
                            </div>
                            <!-- 必填开关 -->
                            <div class="switch" style="display: none;">
                                <div class="switch-title">是否必填</div>
                                <div class="xianshi">
                                    <span class="btn_onoff">
                                        <u class="btn_u"></u>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-box-content">
                            <div class="option">
                                <input class="input" type="radio" name="topic${topicID}" disabled>
                                <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                <div class="option-input" style="display: none;">
                                    <input type="text">
                                </div>
                                <div class="delTwo">
                                    删除选项
                                </div>
                                <div class="details">
                                    数量<span>123</span>，占比<span>10</span>
                                </div>
                            </div>
                            <div class="option">
                                <input class="input" type="radio" name="topic${topicID}" disabled>
                                <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                <div class="option-input" style="display: none;">
                                    <input type="text">
                                </div>
                                <div class="delTwo">
                                    删除选项
                                </div>
                                <div class="details">
                                    数量<span>123</span>，占比<span>10</span>
                                </div>
                            </div>
                            <div class="option">
                                <input class="input" type="radio" name="topic${topicID}" disabled>
                                <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                <div class="option-input" style="display: none;">
                                    <input type="text">
                                </div>
                                <div class="delTwo">
                                    删除选项
                                </div>
                                <div class="details">
                                    数量<span>123</span>，占比<span>10</span>
                                </div>
                            </div>
                        </div>
                        <div class="edit-option" data-name="radio" data-id="topicNum${topicID}">添加选项</div>
                    </div>`
        $('.inputForm').append(radio)
    }
    else if (dataName == 'checkbox') {
        let checkbox = `<div class="main-box" id="topicID${topicID}">
                            <div class="main-box-title">
                                <li class="index-num"></li>
                                <div class="typeTwo">多选题</div>
                                <div class="must" data-id="1" style="display: none;">*</div>
                                <div class="title">
                                    <div class="title-text wrap" id="topicNum${topicID}" data-type="2">题目（点击编辑题目）</div>
                                    <div class="title-input" style="display: none;">
                                        <input type="text">
                                    </div>
                                </div>
                               
                                <!-- 删除 -->
                                <div class="del" style="display: none;">
                                    <img src="./img/shanchu.png" alt="">
                                </div>
                                <!-- 必填开关 -->
                                <div class="switch" style="display: none;">
                                    <div class="switch-title">是否必填</div>
                                    <div class="xianshi">
                                        <span class="btn_onoff">
                                            <u class="btn_u"></u>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="main-box-content">
                                <div class="option">
                                    <input class="input" type="checkbox" name="topic${topicID}" disabled>
                                    <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                    <div class="option-input" style="display: none;">
                                        <input type="text">
                                    </div>
                                    <div class="delTwo">
                                        删除选项
                                    </div>
                                    <div class="details">
                                        数量<span>123</span>，占比<span>10</span>
                                    </div>
                                </div>
                                <div class="option">
                                    <input class="input" type="checkbox" name="topic${topicID}" disabled>
                                    <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                    <div class="option-input" style="display: none;">
                                        <input type="text">
                                    </div>
                                    <div class="delTwo">
                                        删除选项
                                    </div>
                                    <div class="details">
                                        数量<span>123</span>，占比<span>10</span>
                                    </div>
                                </div>
                                <div class="option">
                                    <input class="input" type="checkbox" name="topic${topicID}" disabled>
                                    <div class="option-text topicNum${topicID} wrap">选项（点击编辑选项）</div>
                                    <div class="option-input" style="display: none;">
                                        <input type="text">
                                    </div>
                                    <div class="delTwo">
                                        删除选项
                                    </div>
                                    <div class="details">
                                        数量<span>123</span>，占比<span>10</span>
                                    </div>
                                </div>
                            </div>
                            <div class="edit-option" data-name="checkbox" data-id="topicNum${topicID}">添加选项</div>
                        </div>`
        $('.inputForm').append(checkbox)
    } else if (dataName == 'wenda') {
        let wenda = `<div class="main-box" id="topicID${topicID}">
                        <div class="main-box-title">
                            <li class="index-num"></li>
                            <div class="typeThree">问答题</div>
                            <div class="must" data-id="1" style="display: none;">*</div>
                            <div class="title">
                                <div class="title-text wrap" id="topicNum${topicID}" data-type="3">题目（点击编辑题目）</div>
                                <div class="title-input" style="display: none;">
                                    <input type="text">
                                </div>
                                <div class="details" style="cursor: pointer;">
                                    查看详情
                                </div>
                            </div>
                            <!-- 删除 -->
                            <div class="del" style="display: none;">
                                <img src="./img/shanchu.png" alt="">
                            </div>
                            <!-- 必填开关 -->
                            <div class="switch" style="display: none;">
                                <div class="switch-title">是否必填</div>
                                <div class="xianshi">
                                    <span class="btn_onoff">
                                        <u class="btn_u"></u>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-box-content">
                            <textarea name="topic${topicID}" id="wenda${topicID}" cols="70" rows="10" placeholder="请输入" disabled></textarea>
                        </div>
                    </div>`
        $('.inputForm').append(wenda)
    } else if (dataName == 'score') {
        let score = `<div class="main-box" id="topicID${topicID}">
                        <div class="main-box-title">
                            <li class="index-num"></li>
                            <div class="typeFour">评分题</div>
                            <div class="must" data-id="1" style="display: none;">*</div>
                            <div class="title">
                                <div class="title-text wrap" id="topicNum${topicID}" data-type="4">题目（点击编辑题目）</div>
                                <div class="title-input" style="display: none;">
                                    <input type="text">
                                </div>
                                <div class="details">
                                    数量<span>123</span>，占比<span>10</span>，平均数<span>10</span>
                                </div>
                            </div>
                            <!-- 删除 -->
                            <div class="del" style="display: none;">
                                <img src="./img/shanchu.png" alt="">
                            </div>
                            <!-- 必填开关 -->
                            <div class="switch" style="display: none;">
                                <div class="switch-title">是否必填</div>
                                <div class="xianshi">
                                    <span class="btn_onoff">
                                        <u class="btn_u"></u>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-box-content">
                            <div class="star-evaluate">
                                <div class="com-star float-left star${topicID}" data-star="0">
                                    <i class="xx-star2" onclick="praise(1,$(this));"></i>
                                    <i class="xx-star2" onclick="praise(2,$(this));"></i>
                                    <i class="xx-star2" onclick="praise(3,$(this));"></i>
                                    <i class="xx-star2" onclick="praise(4,$(this));"></i>
                                    <i class="xx-star2" onclick="praise(5,$(this));"></i>
                                </div>
                            </div>
                        </div>
                    </div>`
        $('.inputForm').append(score)
    }
    // 给li添加题目序号
    $('ul li').each(function (index) {
        var order = (index + 1);
        $(this).attr('data-order', order);
    });
})

// 点击编辑标题
$('.inputForm').on('click', '.title-text', function () {
    let val = $(this).text()
    $(this).hide()
    $(this).siblings().show()
    $(this).next().children().focus()
    if (val !== '题目（点击编辑题目）') {
        $(this).next().children().val(val)
    }
})
// 标题输入框失去焦点事件
$('.inputForm').on('blur', '.title-input>input', function () {
    let val = $(this).val()
    $(this).parent().hide()
    $(this).parent().next().hide()
    $(this).parent().prev().show()
    if (val.length <= 0 || /^\s+$/.test(val)) {
        $(this).parent().prev().text('题目（点击编辑题目）')
    } else {
        // val = val.trim();
        $(this).parent().prev().text(val)
    }

})
// 点击编辑选项
$('.inputForm').on('click', '.option-text', function () {
    let val = $(this).text()
    $(this).hide()
    $(this).next().show()
    $(this).next().children().focus();
    if (val !== '选项（点击编辑选项）') {
        $(this).next().children().val(val)
    }
})
// 选项输入框失去焦点事件
$('.inputForm').on('blur', '.option-input>input', function () {
    let val = $(this).val()
    $(this).parent().hide()
    $(this).parent().prev().show()
    if (val.length <= 0 || /^\s+$/.test(val)) {
        $(this).parent().prev().text('选项（点击编辑选项）')
    } else {
        // val = val.trim();
        $(this).parent().prev().text(val)
        $(this).parent().siblings('.input').val(val)
    }
})
// 点击添加选项
$('.inputForm').on('click', '.edit-option', function () {
    let topicName = $(this).attr('data-name')
    let topicID = $(this).attr('data-id')
    let text = ''
    if (topicName == 'radio') {
        text = `<div class="option">
                        <input class="input" type="radio" name="topic${topicID}" disabled>
                        <div class="option-text ${topicID} wrap">选项（点击编辑选项）</div>
                        <div class="option-input" style="display: none;">
                            <input type="text">
                        </div>
                        <div class="delTwo">
                            删除选项
                        </div>
                        <div class="details">
                            数量<span>123</span>，占比<span>10</span>
                        </div>
                    </div>`
    } else if (topicName == 'checkbox') {
        text = `<div class="option">
                    <input class="input" type="checkbox" name="topic${topicID}" disabled>
                    <div class="option-text ${topicID} wrap">选项（点击编辑选项）</div>
                    <div class="option-input" style="display: none;">
                        <input type="text">
                    </div>
                    <div class="delTwo">
                        删除选项
                    </div>
                    <div class="details">
                        数量<span>123</span>，占比<span>10</span>
                    </div>
                </div>`
    }

    $(this).prev().append(text)
})
// 点击删除选项
$('.inputForm').on('click', '.delTwo', function () {
    $(this).parent().remove()
})

// 删除按钮点击事件
$('.main').on('click', '.del', function () {
    $('.pop').show()
    delDom = $(this).parent().parent().attr('id')
})
// 弹出框取消事件
$('.cancel').click(function () {
    $('.pop').hide()
})
// 弹出框确定事件
$('.confirm').click(function () {
    $('#' + delDom).remove()
    $('.pop').hide()
    if ($('.main-box').length == 0) {
        $('h1').show()
        $('.main').hide()
    }

    // 给li添加题目序号
    $('ul li').each(function (index) {
        var order = (index + 1);
        $(this).attr('data-order', order);
    });
})

// 必填开关
//2就是开启  1就是关闭
$('.inputForm').on('click', '.btn_onoff', function () {
    // 控制必选开关
    // 给定是不是必选
    let onoffNum = $(this).parent().parent().siblings('.must').attr('data-id')
    if (onoffNum == '1') {
        $(this).children().css("transform", "translateX(-2px)");
        $(this).css("background", "#09bb07");
        $(this).parent().parent().siblings('.must').attr('data-id', '2')
        $(this).parent().parent().siblings('.must').show()
    } else if (onoffNum == '2') {
        $(this).children().css("transform", "translateX(-22px)");
        $(this).css("background", "#ccc");
        $(this).parent().parent().siblings('.must').attr('data-id', '1')
        $(this).parent().parent().siblings('.must').hide()
    }
})
// 星星点击事件
function praise(num, obj) {
    obj.parent().attr('data-star',num)
    obj.prevAll().attr('class', 'xx-star');
    obj.attr('class', 'xx-star');
    obj.nextAll().attr('class', 'xx-star2');
}

// 鼠标移入移出事件
$('.inputForm').on('mouseenter', '.main-box', function () {
    // $(this).addClass("main-box-hover");
    $(this).find('.del').show()
    $(this).find('.switch').show()
})
$('.inputForm').on('mouseleave', '.main-box', function () {
    $(this).find('.del').hide()
    $(this).find('.switch').hide()
})

// function handleInput (event){
//     if (event.target.tagName === 'INPUT') {
//         event.target.parentNode.nextSibling.nextSibling.children[0].innerHTML
//       }
// }

// 提交事件
$('.head-btn').click(function () {
    $('.edit-option').hide()
    $('.delTwo').hide()
    $('input').removeAttr('disabled')
    $('textarea').removeAttr('disabled')
    let data = []
    for (let i = 1; i <= topicID; i++) {
        if ($('#topicNum' + i).text() !== '') {
            // 标题
            let topic = $('#topicNum' + i).text()
            // 题号
            let topicNum = $('#topicNum' + i).parent().siblings('.index-num').attr('data-order')
            // 题目类型
            let topicType = $('#topicNum' + i).attr('data-type')
            // 是否必填
            let required = $('#topicNum' + i).parent().siblings('.must').attr('data-id')
            // 选项
            let option = $('.topicNum' + i)
            let obj = {
                "serial": topicNum,
                "question": topic,
                "answerType": topicType,
                "isRequired":required,
                "answer":{}
            }
            
            // 循环所有选项
            for (let j = 0; j < option.length; j++) {
                obj.answer[j+1]=option[j].innerText
            }

            data.push(obj)
        }
    }
    console.log(data)
    let dom = $('.inputForm').html()
    localStorage.setItem('dom',dom)
    window.location.href = './content.html?topicID='+topicID;
})

// 回显方法
function echo(){
    $('h1').hide()
    $('.main').show()    
    let dom22 = localStorage.getItem('dom22')
    $('.inputForm').html(dom22)
    $('.edit-option').show()
    $('.delTwo').show()
    $('.input').attr('disabled',true)
    $('textarea').attr('disabled',true)
}

// 获取url参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}


